<template>
	<view class="pageBox pageBox-bgf7">
		<view class="logoBox">
			<image src="@/static/icon/logo.png" mode="aspectFit"></image>
			<text class="name">{{appName}}</text>
			<text class="version">V{{appVersion}}</text>
		</view>
		<view class="listBox">
			<uni-list>
				<uni-list-item  v-for="(agreement,index) in agreements" :key="index" 
					:title="agreement.title" link @click="navigateTo(agreement)"
				>
				</uni-list-item>
				<!-- #ifdef APP-PLUS -->
				<uni-list-item title="检测更新" link ></uni-list-item>
				<!-- #endif -->
			</uni-list>
		</view>
		
	</view>
</template>

<script setup>
	// \down-wallpaper\uni_modules\uni-id-pages\config.js
	import config from '@/uni_modules/uni-id-pages/config.js'
	import {
		computed,
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'

	const appName = ref('')
	const appVersion = ref('')
	onLoad(()=>{
		const res = uni.getAppBaseInfo()
		appName.value = res.appName
		appVersion.value = res.appVersion

	})
	const agreements = computed(() => {
		if(!config.agreements){
			return []
		}
		return [{
				path: 'useragr',
				title: "用户协议"
			},
			{
				path: 'privacypolicy',
				title: "隐私政策"
			}
		]
	})
	const navigateTo = ({
		path,
		title
	}) => {
		uni.navigateTo({
			url: '/pages/agreements/' + path,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
</script>

<style scoped lang="scss">
	:deep(){
		uni-page-wrapper{
			background-color: #f7f7f7;
			
		}
	}
	.pageBox{
		.logoBox{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;
			image{
				border-radius: 20rpx;
				height: 240rpx;
				width: 240rpx;
				background: #fff!important;
				margin-bottom: 30rpx;
			}	
			.name {
				font-size: 36rpx;
			}
			
			.version{
				font-size: 30rpx;
				color: #999999;
			}
		}
		.listBox{
			border-radius: 20rpx;
			overflow: hidden;
			:deep(){
				.uni-list-item{
					height: 120rpx;
				}
			}
				
		}
	}
	
	
	
	.title {
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: 38rpx;
		margin: 20rpx 0;
	}

	.uni-body {
		// 首行缩进
		text-indent: 1em;
	}

	.bottomBox {
		width: 100%;
		height: 300rpx;
	}
</style>